<div ng-controller="AppCtrl" class="md-padding" id="popupContainer" ng-cloak>
  <p class="inset">
    Open a dialog over the app's content. Press escape or click outside to close the dialog and
    send focus back to the triggering button.
  </p>

  <div class="dialog-demo-content" layout="row" layout-wrap layout-margin>
    <md-button class="md-primary md-raised" ng-click="showAlert($event)"   flex="100"  flex-gt-md="auto">
      Alert Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-click="showConfirm($event)"  flex="100"  flex-gt-md="auto">
      Confirm Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex="100" flex-gt-md="auto">
      Custom Dialog
    </md-button>
    <div hide-gt-sm layout="row" layout-align="center center" flex="100">
        <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
      </div>
    <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex="100"  flex-gt-md="auto">
      Tab Dialog
    </md-button>
  </div>
  <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>

  <div ng-if="status">
    <br/>
    <b layout="row" layout-align="center center" class="md-padding">
      {{status}}
    </b>
  </div>

</div>
